<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/css/layui.css}" media="all">
</head>
<body>
<div id="ID-tree-demo"></div>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">提交</button>
</div>
<script th:inline="javascript">
  let ctx = [[${#httpServletRequest.getContextPath()}]];
  let roleId = [[${roleId}]];
</script>
<script th:src="@{/static/lib/layui-v2.8.3/layui.js}" charset="utf-8"></script>
<script>
  layui.use(function() {
      var tree = layui.tree;
      var layer = layui.layer;
      var util = layui.util;

      fetch(ctx + "/sysmenu/getMenu/" + roleId).then((res) => {
          return res.json();
      }).then((data) => {
          console.log(data);
          if (data.code == 200) {
              // 数据
              data = data.data;
              console.log(data);
              // 渲染
              tree.render({
                  elem: '#ID-tree-demo',
                  data: data,
                  showCheckbox: true,  // 是否显示复选框
                  id: 'demo-id-1',
                  isJump: true, // 是否允许点击节点时弹出新窗口跳转
                  oncheck:function(obj){
                      console.log(obj.data); // 得到当前点击的节点数据
                      console.log(obj.checked); // 节点是否被选中
                      console.log(obj.elem); // 得到当前节点元素
                  }
              });
                // 渲染已授权的菜单
              fetch(ctx + '/sysmenu/extracted/' + roleId).then((res) => {
                  return res.json();
              }).then((data) => {
                  console.log(data);
                  if (data.code == 200) {
                      // 数据
                      data = data.data;

                      console.log(data);

                      tree.setChecked('demo-id-1', data);
                  } else {
                      layui.layer.msg("【已授权的菜单】服务器异常请刷新后重试。", {icon: 2, time: 1000});
                  }
              });

          } else {
              layui.layer.msg("【所有菜单】服务器异常请刷新后重试。", {icon: 2, time: 1000});
          }
      });
      // 按钮事件
      util.event('lay-on', {
          getChecked: function (othis) {
              var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据

              let menus = [];
              for (let i = 0; i < checkedData.length; i++) {
                  menus.push(checkedData[i].id);
                  // 子节点
                  if (checkedData[i].children && checkedData[i].children.length > 0) {
                      for (let j = 0; j < checkedData[i].children.length; j++) {
                          menus.push(checkedData[i].children[j].id);
                      }
                  }
              }
              console.log(menus);
              if (menus.length > 0 ){
                  // 发送请求
                  fetch(ctx + '/sysrole/grantMenu',{
                      headers: {
                          'Content-Type': 'application/json'
                      },
                      method: 'POST',
                      body: JSON.stringify({
                          roleId: roleId,
                          menus: menus
                      })
                  }).then(function (resp){
                      return resp.json();
                  }).then(function(json){
                      if (json.code == 200){
                          var index = layer.alert('设置成功', {
                              title: '操作成功',
                          }, function () {
                              // 关闭弹出层
                              layer.close(index);

                              var iframeIndex = parent.layer.getFrameIndex(window.name);
                              parent.layer.close(iframeIndex);

                          });
                      } else {
                          layer.msg(json.msg, {icon: 2, time: 1000});
                      }
                  }).catch(function (error) {
                      layer.msg(error.msg, {icon: 2, time: 1000});
                  });
              }
          }
          , setChecked: function () {
              tree.setChecked('demo-id-1', [12, 16]); // 勾选对应 id 值的节点
          }
          , reload: function () {
              tree.reload('demo-id-1', {}); // 重载实例
          }
      });
  });
</script>
</body>
</html>